{{#page-title name=model.name}}
  <button {{action 'willRenameApp'}}
    class="btn btn-raised btn-default btn-sm rename-app-button">
      Rename
  </button>

  <button {{action 'willDeleteApp'}}
    class="btn btn-raised btn-default btn-sm rename-app-button">
      Delete
  </button>

{{/page-title}}

<div class="row">
  <div class="col-xs-12 col-md-4">
    <div {{bind-attr class=":match-height :panel model.liveBuild:panel-success:panel-default"}}>
      <div class="panel-heading">
        <h3 class='panel-title'>
          Active build

          {{#if app.liveBuild}}
            <a {{bind-attr href=model.location}} class="pull-right">
              {{fa-icon 'external-link'}}
            </a>
          {{/if}}
        </h3>
      </div>
      <div class="panel-body">
        {{build-info build=model.liveBuild}}
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-md-4">
    <div {{bind-attr class=":match-height :panel model.activateNewDeploys:panel-success:panel-default"}}>
      <div class="panel-heading">
        <h3 class='panel-title'>
          Automatically activate new deploys
        </h3>
      </div>
      <div class="panel-body">

        <form>
          <div class="form-group">
            {{toggle-switch
              label="Automatically activate"
              value=model.activateNewDeploys
              action="activateNewDeploys"}}

            <span class="help-block">
              When this option is on Front End Builds will
              automatically start serving new master branch
              deploys. If you want to smoke test your deploys
              before making them live then turn this option off.
            </span>
          </div>
        </form>

      </div>
    </div>
  </div>

  <div class="col-xs-12 col-md-4">
    <div class="match-height panel panel-info">

      <div class="panel-heading">
        <h3 class='panel-title'>
          Help &amp; Guides
        </h3>
      </div>

      <div class="panel-body">

        <div>
          Rails router setup
          <span class="pull-right text-muted">coming soon</span>
        </div>

        <hr class='short-divider'>

        <div>
          Amazon S3 setup
          <span class="pull-right text-muted">coming soon</span>
        </div>

        <hr class='short-divider'>

        <div>
          Ember-cli setup
          <span class="pull-right text-muted">coming soon</span>
        </div>

      </div>
    </div>
  </div>
</div>

{{#if model.orderedBuilds}}
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">
        Builds
      </h3>
    </div>

    <div class="panel-body">
      <p>
        A list of the most recent builds for
        {{model.name}}.
      </p>

      {{build-list builds=model.orderedBuilds}}
    </div>
  </div>
{{/if}}
